<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 伪元素，表示页面中一些特殊的并不真实存在的元素（特殊位置） 
      伪元素使用 :: 开头

      ::first-letter 表示第一个字母
      ::first-line 表示第一行
      ::selection 鼠标选择
    */
    p {
      font-size: 20px;
    }

    p::first-letter {
      font-size: 40px;
    }

    p::selection {
      background-color: blue;
    }

    div::before {
      content: "abbbb";
      color: red;
    }
  </style>
</head>

<body>
  <div>hello jjj lll jjj</div>
  <p>ajhgajkghnnncsadk</p>
</body>

</html>

<!-- 

### 1. **生成内容伪元素**

- `::before`：在元素内容之前插入生成的内容。
- `::after`：在元素内容之后插入生成的内容。

content 属性是必需的，即使你不想为伪元素生成实际的内容，也需要设置 content: ""; 或其他有效的值。
生成的内容默认是行内元素，但你可以使用其他 CSS 属性（如 display）来改变其布局行为。
生成的内容默认是不可点击或不可选择的。如果需要互动性，需要使用 JavaScript 或其他手段

### 2. **选择文本的部分**

- `::first-line`：选择元素的第一行文本。
- `::first-letter`：选择元素的第一个字母。

### 3. **选择元素的特定部分**

- `::selection`：选择用户选择的文本部分。

### 4. **列表元素伪元素**

- `::marker`：选择列表元素的标记部分。

### 5. **表格元素伪元素**

- `::cue`：选择表格的caption、thead、tfoot和tbody元素的内容。

### 6. **分页伪元素**

- `::page`：选择元素在文档中的每一页。

### 7. **滚动条伪元素**

- `::scrollbar`：选择滚动条的轨道部分。
- `::thumb`：选择滚动条的拖动部分。
- `::track`：选择滚动条的轨迹部分。

### 8. **输入框伪元素**

- `::placeholder`：选择输入框的占位符文本。

### 9. **其他伪元素**

- `::backdrop`：选择元素的背后的背景。
- `::cue`：选择媒体元素（如video和audio）的提示部分。
- `::content`：选择`<content>`元素的内容。
- `::part`：选择具有指定part属性的Shadow DOM的部分。
- `::slotted`：选择被插槽分发的元素。

 -->